<template>
	<div>
		<PerHeader />
		<div class="person-body">
			<div class="person-left">
				<div class="person-info">
					<p>个人信息</p>
					<hr />
				</div>
				<div class="person-touxiang">
					<div class="person-img" @mouseenter="xgTouxiang(true)" @mouseleave="xgTouxiang(false)">
						<img src="../../../assets/person/person.png" alt="" />
						<router-link v-if="isXiuGai" :to="{name:'portrait'}">修改头像</router-link>
					</div>
					<div class="person-name">
					    <p @click="xgName($event)" v-if="!isInput">{{chuShiName}}</p>
					    <input type="text" v-if="isInput" v-model="nameInput"
					    	@focus="nameChange(true)" @blur="nameChange(false)"/>
					    <h6>用户名</h6>
					</div>
				</div>
				<p class="last-login-time">最后一次登陆：2017-12-04 17:00</p>
				<div class="route-select">
					<ul>
						<li>
							<router-link :to="{name:'changeReg'}" ><i></i>密码修改</router-link>
						</li>
						<li>
							<router-link :to="{name:'invite'}"><i></i>邀请用户</router-link>
						</li>
						<li>
							<router-link :to="{name:'orderMana'}"><i></i>订单管理</router-link>
						</li>
						<li>
							<router-link :to="{name:'perNews'}"><i></i>消息管理</router-link>
						</li>
					</ul>
				</div>
			</div>
			<div class="person-right">
				<router-view></router-view>
			</div>
			<PersonPop :popContent="popContent" v-if="isPop"/>
		</div>
	</div>
</template>

<script>
	// 引入头部
	import PerHeader from '@/components/header'
	// 引入昵称不符合规则弹出框
	import PersonPop from '@/components/public/personPop'
	export default {
		components: {
			PerHeader,
			PersonPop
		},
		data () {
			return {
				isXiuGai: false, //鼠标移入，是否修改头像
				isInput: false, // 昵称修改框是否显示
				nameInput: '', // 修改的昵称
				chuShiName: '独家记忆', // 初始昵称
				popContent: { // 弹框的内容
					imgUrl: require("../../../assets/gantanhao.png"),
					content: "支持输入汉字、英文、数字<br />最多10个字符！"
				},
				isPop: false // 是否显示昵称不和规定弹框
				
			}
		},
		methods: {
			// 鼠标移入/移出头像，
			xgTouxiang (val) {
				this.isXiuGai = val
			},
			// 修改昵称
			xgName (e) {
				var that = this
				var eve = e || window.event
				that.isInput = true
				that.nameInput = eve.target.innerHTML
				that.chuShiName = eve.target.innerHTML
			},
			// 修改昵称input失去焦点和获取焦点
			nameChange (val) {
				var that = this
				if (val) {
					that.nameInput = ''
				} else {
					that.isInput = false
					var inp = that.nameInput
					if (!(/^[0-9a-zA-Z\u4e00-\u9fa5]{1,10}$/.test(inp))) {
						if (inp) {
							that.isPop = true
							setTimeout (function () {
								that.isPop = false
							},3000)
						} else {
							that.isPop = false
							console.log(1)
						}
						that.chuShiName = that.chuShiName
					} else {
						that.isPop = false
						that.chuShiName = inp
					}
				}
			}
		}
	}
</script>

<style scoped>
  @import '../../../../static/personal/personInfo.css'
</style>